<template>
  <el-collapse v-model="activeName" accordion>
    <el-collapse-item 
      v-for="item in features"
      :key="item.id"
      :title="item.title" 
      :name="item.id"
    >
      <div v-html="item.content" />
    </el-collapse-item>
  </el-collapse>
</template>

<script setup>
import {ref} from 'vue'

// eslint-disable-next-line
defineProps({
  features: {
    type: Array,
    required: true
  }
})

const activeName = ref(0)
</script>

<style scoped lang="scss">
:deep(.el-collapse-item__header) {
  font-weight: bold !important;
}
.el-collapse-item {
  :deep(a) {
    color: #2d62f7;
    margin: 0 4px;
  }
}
</style>
